﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>defineProperty</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <h1>defineProperty</h1><br/>

    <div id="app">
        {{name}}
        <!--表单元素 input checkbox...-->
        <!--vue的指令"directive" 只是dom上的行间属性，
        vue给这类属性赋予一定的意义   来实现特殊的功能 所有功能指令都以 v-开头。
        value属性默认情况下vue会忽略掉 selected checked都没有实际意义
        v-model会将name的值赋予输入框，输入框的值改变会影响数据
        -->
        <input type="text" v-model="name">

    </div>

    <div>
        <p>
            Object.defineProperty    ES5
        </p>
        <input type="text" id="inp">
    </div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    let obj = {};
    let temp = {};//声明一个变量来设置值，不然在set的时候obj.name就会无限调自己的set了
    /*Object.defineProperty(obj,'name',{
        configurable:false,//是否可删除
        writable:false,//是否可以修改值
        enumerable:false,//是否可枚举    这里我的理解是如果是false则使用for in的时候遍历不了属性
        value:1//值
    })*/

    Object.defineProperty(obj,'name',{
         get(){//取obj的name属性会触发
             return temp['name'];
         },
        set(val){//给obj赋值会触发set方法
            temp['name'] = val;//改变temp的结果
            inp.value = val;//将值赋予输入框
        }
    })

    inp.value = obj.name;//页面一加载就调用get方法    document.getElementById可以省
    inp.addEventListener('input',function(){//监听输入框的变化
        obj.name = this.value;//当值变化时会调用set方法
    })
</script>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'hello'
        }
    });
</script>

</body>
</html>